<template>
  <div class="todoInput">
    <input
      type="text"
      placeholder="在这里输入"
      v-model="content"
      @keyup.enter="addItem"
    > <button @click="addItem">添加</button>
  </div>
</template>

<script>
import { useTodoInput } from '@/hooks'
import { onMounted, ref } from 'vue'
export default {
  name: 'TodoInput',
  setup () {
    const { addTodoItem } = useTodoInput()
    const content = ref('')
    const addItem = () => {
      addTodoItem(content.value)
      content.value = ''
    }
    return {
      content,
      addItem
    }
  }
}

</script>

<style scoped>
.todoInput {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
input {
  width: 60vw;
  font-size: 20px;
  padding: 0 8px;
  font-weight: 550;
  margin-right: 4px;
}
</style>
